// 耗材统计

<template>
  <div class="consumables">
    <comTitle class="flex">
      <template #title> 耗材统计 </template>
    </comTitle>
    <div class="echarts">
      <statisticsTableHeader class="mb-10"></statisticsTableHeader>
      <div class="flex pl-24 pr-24">
        <div class="box1 mr-48">
          <charts :option="trend" />
        </div>
        <div class="box1">
          <charts :option="consumables" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "consumablesStatistics",
  components: {
    statisticsTableHeader: () => import("../statisticsTableHeader"),
  },
  data() {
    return {
      consumables: {},
      sum: 220,
      trend: {},
      echartData: {
        一月: {
          item1: 60,
          item2: 50,
          item3: 40,
        },
        二月: {
          item1: 50,
          item2: 40,
          item3: 30,
        },
        三月: {
          item1: 40,
          item2: 30,
          item3: 20,
        },
        四月: {
          item1: 60,
          item2: 50,
          item3: 40,
        },
        五月: {
          item1: 70,
          item2: 60,
          item3: 50,
        },
        六月: {
          item1: 80,
          item2: 70,
          item3: 60,
        },
        七月: {
          item1: 90,
          item2: 80,
          item3: 70,
        },
        十月: {
          item1: 80,
          item2: 70,
          item3: 60,
        },
        十一月: {
          item1: 70,
          item2: 60,
          item3: 50,
        },
        十二月: {
          item1: 60,
          item2: 50,
          item3: 40,
        },
      },
      form: {
        采购量: "item1",
        使用量: "item2",
        库存量: "item3",
      },
      wasteTypewuran: {},
      scaleData: [
        {
          name: "有毒有害气体",
          value: 80,
          color: "#00D4B9",
          bg: "#2DD3A2",
        },
        {
          name: "温度",
          value: 60,
          color: "#F7A515",
          bg: "#E7A634",
        },
        {
          name: "湿度",
          value: 40,
          color: "#5699FF",
          bg: "#5699FF",
        },
        {
          name: "含氧量",
          value: 40,
          color: "#F9708B",
          bg: "#E96C6C",
        },
      ],
      complete: {
        氢氧化铁: 9,
        硫酸铜: 6,
        盐酸: 6,
        氢氧化镁: 5,
        碳酸钙: 4,
        氢氧化钠: 3,
        硫酸: 2,
        氧化钙: 2,
      },
    };
  },
  mounted() {
    this.initconsumables(this.complete);
    this.configLineChart();
  },
  methods: {
    /* 碳排放总量趋势变化图 */
    configLineChart(form = this.form, data = this.echartData) {
      this.trend = {
        title: {
          text: "耗材出入库变化情况",
          textStyle: {
            color: "#5F717D",
            fontSize: 16,
          },
          top: 20,
          left: "center",
        },
        grid: {
          top: "20%",
          left: "4%",
          right: "6%",
          bottom: "6%",
          containLabel: true,
        },
        legend: {
          right: 20,
          top: 60,
          itemHeight: 3,
          itemGap: 28,
          icon: "diamond",
          orient: "horizontal",
          // y: "center", //延Y轴居中
          // x: "92%", //居右显示
          textStyle: { color: "#5F717D" },
          data: Object.keys(form),
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        xAxis: {
          type: "category",
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#00BFB1",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#5F717D",
            },
            //X轴过长换行
          },
          boundaryGap: false,
          data: Object.keys(data), //X轴
        },
        yAxis: {
          name: "重量 / kg",
          nameTextStyle: {
            color: "#B5C4D0",
          },
          // max:14,
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#B5C4D0",
            },
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#B5C4D0",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#00BFB1",
            },
          },
        },
        series: Object.entries(form).map((item1) => {
          return {
            name: item1[0],
            stack: item1[0],
            type: "line",
            smooth: true,
            connectNulls:false,
            label: {
              normal: {
                show: false,
              },
            },
            symbol:'none',
            itemStyle: {
              color: this.getColor(item1[0]),
            },
            data: Object.values(data).map((item) => item[item1[1]]),
          };
        }),
      };
    },
    getColor(key) {
      const color = {
        采购量: "#00D4B9",
        使用量: "#F9708B",
        库存量: "#5699FF",
      };
      return color[key];
    },
    /* 超标区域分布 */
    initconsumables(data) {
      if (Object.values(data).length > 0) {
        this.consumables = {
          grid: {
            height: "76%",
            left: "14%",
            right: "10%",
          },
          title: {
            text: "耗材使用量分析",
            textStyle: {
              color: "#5F717D",
              fontSize: 16,
            },
            top: 20,
            left: "center",
          },
          xAxis: {
            minInterval: 2,
            axisLine: {
              show: false,
              lineStyle: {
                color: "#5F717D",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#e5e5e5",
                type: "dashed",
              },
            },
            type: "value",

            nameTextStyle: {
              color: "#8B9AA7",
            },
          },
          textStyle: {
            color: "#8B9AA7",
          },
          yAxis: {
            name: "重量 / kg",
            nameTextStyle: {
              color: "#737373",
              verticalAlign: "bottom",
              align: "right",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#00BFB1",
              },
            },
            type: "category",
            data: Object.keys(data),
            inverse: false,
          },
          series: [
            {
              label: {
                show: true,
                position: "right",
                position: "right",
                color: "#00BFB1",
              },
              barWidth: 14,
              barGap: "100%",
              itemStyle: {
                barBorderRadius: [0],
                color: "#00BFB1",
              },
              data: Object.values(data),
              type: "bar",
            },
          ],
        };
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.consumables {
  padding: 0px 24px;
  .echarts {
    .box1 {
      width: 50%;
      background: #f7f8fc;
      border-radius: 4px;
      height: 444px;
      .title {
        width: 100%;
        height: 66px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .echart_right {
        width: 100%;
        display: flex;
        align-items: center;
        height: 77%;
        .center_chart {
          position: relative;
          width: 60%;
          height: 100%;
        }
        .data-right {
          width: 26%;
          height: 100%;
          justify-content: center;
          margin-right: 50px;
          .sum {
            width: 165px;
            height: 40px;
            background: #eff0f2;
            border-radius: 4px;
          }
          .data-end-right {
            box-sizing: border-box;
            width: 100%;
            .status:nth-last-child(1) {
              margin-bottom: 0px !important;
            }
            .spot {
              width: 8px;
              height: 8px;
              border: 3px solid;
              margin-right: 12px;
            }
          }
        }
      }
    }
  }
}
</style>